﻿
@model  ScadaWeb.Model.ScadaEquipmentModel
@{
    ViewBag.Title = "设备实时曲线";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}
<!--引用多选下拉框-->

<script src="~/Content/lib/echarts/echarts.min.js"></script>

<form class="layui-form layui-col-md12 ok-search">
    <input id="Id" name="Id" type="hidden" class="layui-input" value="@Model.Id" lay-filter>
    <input id="GroupId" name="GroupId" type="hidden" class="layui-input" value="@Model.GroupId" lay-filter>
    <input id="DeviceId" name="DeviceId" type="hidden" class="layui-input" value="@Model.DeviceId" lay-filter>
    <input id="ServerId" name="ServerId" type="hidden" class="layui-input" value="@Model.ServerId" lay-filter>
    <input id="CommunicationId" name="CommunicationId" type="hidden" class="layui-input" value="@Model.CommunicationId" lay-filter>
    <!--条件筛选区域-->
    <div class="layui-row">
        <div class="layui-input-inline">
            <div id="paralist" style="width:350px;"></div>
        </div>
        <div class="layui-input-inline">
            <input type="radio" name="chartstyle" value="1" title="叠加" checked="" style="width:50px;">
            <input type="radio" name="chartstyle" value="2" title="轮播" style="width:50px;">
            <input type="radio" name="chartstyle" value="3" title="分区" style="width:50px;">
        </div>

        <div class="layui-input-inline">
            <input class="layui-input" placeholder="开始日期" autocomplete="off" name="StartDate" id="StartDate" value="@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd HH:mm:ss")">

        </div>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="结束日期" autocomplete="off" name="EndDate" id="EndDate" value="@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal" onclick="ReadHistorySeries()">确定</button>
        </div>
    </div>
</form>
<hr class="layui-bg-orange">

<div class="layui-row">
    <div id="stackrealchart" style="width:100%;height:500px"></div>
</div>





<script>


     var serieitems = JSON.parse('@MvcHtmlString.Create(Model.JsonParas)');
        for (var i = 0; i < serieitems.length; i++) {

            serieitems[i].name = serieitems[i].ParaTitle;
            serieitems[i].value = serieitems[i].ParaName;
            serieitems[i].selected = false;

        }

        var series = xmSelect.render({
            el: '#paralist',
            filterable: true,
            paging: true,
            pageSize: 50,
            language: 'zn',
            data: serieitems,
            radio: false
        });


    layui.use(["form", "okLayer", "okUtils", "laydate"], function () {
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        var $ = layui.$;
        let startdate = layui.laydate;
        let enddate = layui.laydate;
        startdate.render({
            elem: '#StartDate'
            , type: 'datetime'
        });
        enddate.render({
            elem: '#EndDate'
            , type: 'datetime'
        });

    });
    var myChart = echarts.init(document.getElementById('stackrealchart'));
    var charttype = 1;
    var option = null;
    var seriesindex = series.getValue('valueStr');
    var lastDate = null;
    //初始化选择的井的历史数据
    function ReadHistorySeries()
    {
        myChart = echarts.init(document.getElementById('stackrealchart'));
        myChart.clear();

        var groupname = "@Model.ModelTitle 历史曲线";

        //图显示样式
         charttype = $("input[name='chartstyle']:checked").val();
        seriesindex = series.getValue('valueStr');
 
        //获取用户选择的指标



        var para = {
            groupid: '@Model.GroupId',
            serverid: '@Model.ServerId',
            communicateid: '@Model.CommunicationId',
            deviceid: '@Model.DeviceId',
            equipmentid: '@Model.Id',
            charttype: charttype,
            selectserie: seriesindex,
            sdate: $("#StartDate").val(),
            edate: $("#EndDate").val()
        };
        $.post("/Scada/ScadaEquipment/EquipmentHistorySeriesData", para, function (result) {

             var res = JSON.parse(JSON.stringify(result).replace("-9999",""));
             var yAxiss = new Array();
             var xAxiss = new Array();//分区显示要用,叠加显示不需要此集合
             var grids = new Array();
             var gridheight = 80 / res.yAxis.length;
            for (var i = 0; i < res.yAxis.length; i++) {
                if (res.yAxis[i].data == undefined || res.yAxis[i].data == null)
                    res.yAxis[i].data = [];
                 yAxiss.push({
                     type: "value",
                     data: res.yAxis[i].data,
                     name: res.yAxis[i].name,

                     offset: i * 40,
                     minorTick: {
                         show: true
                     },
                     splitLine: { show: true },
                     minorSplitLine: {
                         show: true
                     },
                     position: 'left',
                     nameRotate: 90,
                     nameLocation: 'middle',


                 })

                 xAxiss.push({
                     type: "category",
                     data: res.xAxis[0].data,

                     minorTick: {
                         show: true
                     },

                 })
                 grids.push({

                     top: (4+i*gridheight+2).toString()+'%',
                     bottom: (4 + (i + 1) * gridheight).toString() + '%',
                     height: gridheight.toString()+'%'
                 });
             }

             var series = new Array();
             var series3 = new Array();
             for (var i = 0; i < res.series.length; i++) {
                 series.push({
                     id: res.series[i].id,
                     type: res.series[i].type,
                     data: res.series[i].data,
                     name: res.series[i].name,
                     yAxisIndex: i,
                     showSymbol: res.series[i].showSymbol,
                     symbol: res.series[i].symbol,
                     symbolSize: res.series[i].symbolSize,

                     itemStyle: {
                         color: res.series[i].lineStyle.color,
                         width: res.series[i].lineStyle.width,
                         type: res.series[i].lineStyle.type,

                     }

                 });
                 series3.push({
                     id:res.series[i].id,
                     type: res.series[i].type,
                     data: res.series[i].data,
                     name: res.series[i].name,
                     yAxisIndex: i,
                     xAxisIndex:i,
                     showSymbol: res.series[i].showSymbol,
                     symbol: res.series[i].symbol,
                     symbolSize: res.series[i].symbolSize,

                     itemStyle: {
                         color: res.series[i].lineStyle.color,
                         width: res.series[i].lineStyle.width,
                         type: res.series[i].lineStyle.type,

                     },

                     markLine: {
                         data: [
                             {
                                 type: 'average',
                                 name: '平均值',
                                 label: {
                                     position: 'end',
                                     formatter: "平均值{c}"
                                 },
                                 lineStyle: { color: "#00FF00" }
                             },

                             {
                                 symbol: 'circle',
                                 label: {
                                     position: 'end',
                                     formatter: "最大值{c}"

                                 },
                                 type: 'max',
                                 name: '最高点',
                                 lineStyle: { color: "#FF0000" }
                             },
                              {
                                  symbol: 'circle',
                                  label: {
                                      position: 'end',
                                      formatter: "最小值{c}"

                                  },
                                  type: 'min',
                                  name: '最底点',
                                  lineStyle: { color: "#0000FF" }

                              }

                         ]
                     },


                 })

             }
              if (charttype == 3)//如果是独立分区显示的话要设置坐标轴所在的每个单元
             {
                 for (var i = 0; i < res.yAxis.length; i++) {
                     yAxiss[i].gridIndex = i;
                     yAxiss[i].offset = 0;

                     xAxiss[i].gridIndex = i;


                 }
             }
            if (charttype == 1)//叠加显示,曲线图元是 stackrealchart
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 120);

                // 基于准备好的dom，初始化echarts实例

                // 指定图表的配置项和数据
                  option = {
                    title: {
                        text: groupname + '历史曲线',
                        left:'center',
                        subtext:'数据来源LAZY OS 系统'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },

                    legend: {
                        data: res.legend.data,
                        left: 10,

                        x: 'center',      //可设定图例在左、右、居中
                        y: 'bottom',     //可设定图例在上、下、居中
                    },

                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '7%',
                        containLabel: true
                    },
                    xAxis: [
                       {
                           type: "category",
                         data: res.xAxis[0].data,
                         minorTick: {
                             show: true
                         },
                         minorSplitLine: {
                             show: true
                         },
                         splitLine: { show: false },
                       }
                    ],
                    series: series,
                    yAxis: yAxiss,

                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 120);
                myChart.resize();

            }
            else if(charttype==2)//轮播显示
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 20);

                var series2 = new Array();
                for (var i = 0; i < res.series.length; i++) {
                    series2.push({
                        id: res.series[i].id,
                        type: res.series[i].type,

                        name: res.series[i].name,

                        showSymbol: res.series[i].showSymbol,
                        symbol: res.series[i].symbol,
                        symbolSize: res.series[i].symbolSize,

                        itemStyle: {
                            color: res.series[i].lineStyle.color,
                            width: res.series[i].lineStyle.width,
                            type: res.series[i].lineStyle.type,

                        }

                    })
                }

                // 基于准备好的dom，初始化echarts实例

                // 指定图表的配置项和数据
                  option =  {
                    baseOption: {
                        timeline: {
                            data: res.legend.data,
                            axisType: 'category',
                            show: true,
                            autoPlay: true,
                            playInterval: 10000,

                        },
                        title: {
                            text: groupname + '历史曲线',
                            left: 'center',
                            subtext: '数据来源LAZY OS 系统'
                        },
                        calculable: true,
                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },

                        legend: {
                            data: res.legend.data,
                            left: 10,
                            x: 'center',      //可设定图例在左、右、居中
                            y: 'bottom',     //可设定图例在上、下、居中

                        },
                        grid: [{
                            top: 80,
                            bottom: 100
                        }],
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },


                        xAxis: [
                              {
                                  type: "category",

                                    minorTick: {
                                      show: true
                                  },
                                  minorSplitLine: {
                                      show: true
                                  },
                                  splitLine: { show: false },

                              }

                        ],
                        series: [{
                            type: 'line',

                        }],

                        yAxis: [{
                            type: 'value',
                            name:"实时值",
                            minorTick: {
                                show: true
                            },
                            splitLine:{show:true},
                            minorSplitLine: {
                                show: true
                            },

                            position: 'left',
                            nameRotate: 90,
                            nameLocation: 'middle',

                        }
                        ],


                    },
                    options: []
                };

                option.options = new Array();
                for (var i = 0; i < res.yAxis.length; i++) {
                    option.options.push({
                        yAxis: {
                            type: 'value',
                            name: res.yAxis[i].name,
                        },
                        xAxis: {
                            type: 'category',
                            name: res.xAxis[0].name,
                            data: res.xAxis[0].data,
                        },
                        series: {
                            id: series2[i].id,
                            markLine: {
                                data: [
                                    {
                                        type: 'average',
                                        name: '平均值',
                                        label: {
                                            position: 'end',
                                            formatter:"平均值{c}"
                                        },
                                        lineStyle: {color:"#00FF00"}
                                    },

                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'end',
                                            formatter: "最大值{c}"

                                        },
                                        type: 'max',
                                        name: '最高点',
                                        lineStyle: { color: "#FF0000" }
                                    },
                                     {
                                         symbol: 'circle',
                                         label: {
                                             position: 'end',
                                             formatter: "最小值{c}"

                                         },
                                         type: 'min',
                                         name: '最底点',
                                         lineStyle: { color: "#0000FF" }

                                     }

                                ]
                            },
                            type: res.series[i].type,
                            data: res.series[i].data,

                            yAxisIndex: 0,
                            xAxisIndex:0,
                            showSymbol: res.series[i].showSymbol,
                            symbol: res.series[i].symbol,
                            symbolSize: res.series[i].symbolSize,
                            itemStyle: {
                                color: res.series[i].lineStyle.color,
                                width: res.series[i].lineStyle.width,
                                type: res.series[i].lineStyle.type,

                            }
                        }
                    })
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', $(window).height() - 20);
                myChart.resize();
            }
            else if (charttype == 3)//分区显示
            {
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', 250 * res.yAxis.length);

                option = {

                    title: {
                        text: groupname + '实时采集曲线',
                        left: 'center',
                        subtext: '数据来源LAZY OS 系统'
                    },
                    tooltip: {
                        trigger: 'none',
                        axisPointer: {
                            type: 'cross'
                        }
                    },

                    legend: {
                        data: res.legend.data,
                        left: 10,
                        x: 'center',      //可设定图例在左、右、居中
                        y: 'bottom',     //可设定图例在上、下、居中

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: grids,
                    series: series3,
                    yAxis: yAxiss,
                    xAxis: xAxiss,
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                $("#stackrealchart").css('width', $(window).width() - 150);
                $("#stackrealchart").css('height', 250 * res.yAxis.length);
                myChart.resize();
            }
          
        });

    }
 
    var maxpoint = 500;
 

</script>




